<template>
    <view class="content">
        <view class="item">
            <view class="item-t">
                <view>问题</view>
                <view class="time">{{data.date}}</view>
            </view>
            <view>{{data.question}}</view>
        </view>
        
        <view class="item">
            <view class="item-t">考题选项</view>
            <view v-for="(el, ind) in data.answer" :key="ind">
                {{letterList[ind].name}}、{{el.options}}
            </view>
        </view>
        
        <view class="item">
            <view class="item-t">正确答案</view>
            <view v-for="(item, ind) in data.answer" :key="ind" v-if="item.status == 1">
                {{letterList[ind].name}}、{{item.options}}
            </view>
        </view>
        
        <view class="btn" @click="$gTo('/staff/pages/create/add-question?id=' + id)">立即编辑</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                data: {},
                id: '',
                letterList: [{
                		name: "A"
                	}, {
                		name: "B"
                	}, {
                		name: "C"
                	}, {
                		name: "D"
                	}, {
                		name: "E"
                	}, {
                		name: "F"
                	}, {
                		name: "G"
                	}, {
                		name: "H"
                	}, {
                		name: "I"
                	}, {
                		name: "J"
                	}, {
                		name: "K"
                	}, {
                		name: "L"
                	}, {
                		name: "M"
                	}, {
                		name: "N"
                	}, {
                		name: "O"
                	}, {
                		name: "P"
                	}, {
                		name: "Q"
                	}, {
                		name: "R"
                	}, {
                		name: "S"
                	}, {
                		name: "T"
                	}, {
                		name: "U"
                	}, {
                		name: "V"
                	}, {
                		name: "W"
                	}, {
                		name: "X"
                	}, {
                		name: "Y"
                	}, {
                		name: "Z"
                }],
            };
        },
        onLoad(option) {
            this.id = option.id
        },
        onShow() {
            this.getData()
        },
        methods: {
            getData() {
                this.$ajax('question_detail', {
                    user_token: this.$getSync('userToken'),
                    id: this.id,//考题id
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.data = ret.detail
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
    .content{
        padding: 20rpx;
    }
    .item{
        background-color: #fff;
        padding: 25rpx;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
    }
    .item-t{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 15rpx;
        color: #808080;
    }
    .time{
        font-size: 24rpx;
        color: #00a1e9;
    }
    
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #00a1e9;
        border-radius: 50rpx;
        margin-top: 50rpx;
    }
    
</style>
